<template>
    <div class="EchartPractice">
        <div @click="change">修改数据</div>
        <div @click="changeadd">增加数据</div>
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    data() {
        return {
            xDataArr: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'],
            yDataArr: [88, 92, 63, 77, 94, 80, 72, 86]
        }
    },
    methods: {
        change() {
            let myEchart = echarts.init(this.$refs.main, 'dark');
            var yDataArr = [58, 92, 63, 57, 94, 80, 52, 86]
            var option = {
                series: [
                    {
                        data: yDataArr// 数据
                    }
                ]
            }
            myEchart.setOption(option);
        },
        changeadd() {
            let myEchart = echarts.init(this.$refs.main, 'dark');
            this.xDataArr.push('小明')
            this.yDataArr.push(88)
            var option = {
                xAxis: {
                    data: this.xDataArr,
                },
                series: [
                    {
                        data: this.yDataArr
                    }
                ]
            }
            myEchart.setOption(option);
        },
        drawChart() {
            let myEchart = echarts.init(this.$refs.main, 'dark');
            var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
            var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
            var option = {
                animation: true, // 控制动画是否开启
                // animationDuration: 7000, //动画的时长，它是以毫秒为单位
                animationDuration: function (arg) {
                    // console.log(arg)
                    return 2000 * arg
                },
                animationEasing: 'bounceOut', //缓动动画
                // animationThreshold: 7, //动画元素的阀值
                xAxis: {
                    type: 'category',
                    data: xDataArr,
                },
                yAxis: {
                    type: 'value',

                },
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        data: yDataArr// 数据
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

